<template>
  <div class="maindivwc">
    <v-scale-screen
      :width="windowWidth"
      :height="windowHeight"
      :full-screen="false"
      :autoScale="{ x: false, y: false }"
    >
      <div class="maindiv" ref="refdiv">
        <!--头部模块-->
        <div class="Touristportrait">
          <div class="weather">
            <div class="fanhuimain" @click="gohome">
              <img src="../../../assets/largescreen/y19.png" alt="" />
            </div>
            <div class="weatherimg"><img :src="qihouimg" alt="" /></div>
            <div class="weathertext">{{ tianqi }} {{ wendu }}℃</div>
          </div>
          <div class="Navigation">
            <div class="Navigationleft">
              <div class="Navigationimg" @click="go1">游客画像</div>
              <div class="Navigationimg" style="margin-left: 20px" @click="go3">
                酒店民宿
              </div>
            </div>
            <div class="Navigationmiddle">
              <img src="../../../assets/largescreen/y18.png" alt="" />
            </div>
            <div class="Navigationright">
              <div class="Navigationimgright" @click="go4">交通</div>
              <div
                class="Navigationimgright selectdada"
                style="margin-left: 20px"
                @click="go2"
              >
                景区
              </div>
            </div>
          </div>
          <div class="mydate">{{ nowDate }} {{ week }}</div>
        </div>
        <!--下方模块-->
        <div class="Touristbottomportrait">
          <!--左侧模块-->
          <div class="Leftsidemodule">
            <div class="modulediv">
              <div class="moduledivtop">今日预约量</div>

              <div class="tableDiv tableDiv_phb">
                <vue-seamless-scroll
                  ref="vueSeamlessPhbRef"
                  class="scroll-list-seamless-phb"
                  :data="data1Copy"
                  :class-option="defaultOption"
                >
                  <ul class="ul-scoll">
                    <li
                      v-for="(item, index) in data1"
                      :key="index"
                      class="td_item"
                    >
                      <div class="tdi_left">
                        <div
                          class="tdil_top"
                          :style="{
                            'background-image':
                              'url(' +
                              require('../../../assets/largescreen/top' +
                                (index < 3 ? index + 1 : 4) +
                                '.png') +
                              ')',
                          }"
                        >
                          TOP.{{ index + 1 }}
                        </div>
                        <div class="tdil_name">{{ item.scenicName }}</div>
                      </div>
                      <div class="tdi_right">{{ item.sumCount }}人次</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
            <div class="modulediv">
              <div class="moduledivtop">近7天预约趋势</div>
              <div ref="lineChartRef" style="width: 100%; height: 100%"></div>
            </div>
            <div class="modulediv lp3">
              <div class="moduledivtop">热门景区排行(年)</div>
              <div class="dot">
                <span> <i></i>工作日 </span>
                <span> <i></i>节假日 </span>
              </div>
              <div class="tit">
                <span>排名</span>
                <span>景区名称</span>
                <span>客流量/人次</span>
              </div>
              <div class="data">
                <span v-for="item in xdata" :key="item">{{ item }}万</span>
              </div>
              <div class="mjzyx_pm">
                <vue-seamless-scroll
                  ref="vueSeamlessRef"
                  class="scroll-list-seamless"
                  :data="data2Copy"
                  :class-option="defaultOption"
                >
                  <ul class="ul-scoll">
                    <li
                      v-for="(item, index) in data2"
                      :key="index"
                      class="mpm_item"
                    >
                      <div class="mpmi_left">
                        <div
                          class="mpmil_top"
                          :style="{
                            'background-image':
                              'url(' +
                              require('../../../assets/largescreen/top' +
                                (index < 3 ? index + 1 : 4) +
                                '.png') +
                              ')',
                          }"
                        >
                          TOP.{{ index + 1 }}
                        </div>
                        <div class="mpmil_city">{{ item.scenicName }}</div>
                        <div class="mpmil_line"></div>
                        <div class="mpmil_bl">
                          <div
                            class="mpmil_bl_bfb"
                            :style="{
                              width:
                                (parseFloat(item.workCount || 0) /
                                  RankingTotal) *
                                  100 +
                                '%',
                            }"
                          ></div>
                          <div
                            class="mpmil_bl_bfb"
                            :style="{
                              width:
                                (parseFloat(item.holidayCount || 0) /
                                  RankingTotal) *
                                  100 +
                                '%',
                            }"
                          ></div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <!--中间模块-->
          <div class="Intermediatemodule">
            <div class="modulediv modulediv_jzyx">
              <div class="numsdiv">
                <div class="numsdiv_pre">
                  <div class="np_title">今日预约门票</div>
                  <div class="np_num">
                    <div
                      class="npn_item"
                      v-for="(num, idx) in todayBookingsArr"
                      :key="idx"
                    >
                      {{ num }}
                    </div>
                    <div class="npn_dw">张</div>
                  </div>
                </div>
                <div class="numsdiv_pre numsdiv_pre_mszs">
                  <div class="np_title">年累计核销门票</div>
                  <div class="np_num">
                    <div
                      class="npn_item"
                      v-for="(num, idx) in leaveIslands"
                      :key="idx"
                    >
                      {{ num }}
                    </div>
                    <div class="npn_dw">张</div>
                  </div>
                </div>
              </div>
              <div class="md_map">
                <div class="mapdiv">
                  <div
                    class="mapdiv_town"
                    :class="townIndex == index ? 'town_active' : ''"
                    :style="town.style"
                    v-for="(town, index) in townList"
                    :key="index"
                    @click="changeTown(town.id,index)"
                  >
                    {{ town.name }}
                  </div>
                </div>
              </div>
            </div>
            <!--<div class="mapdiv">-->
            <!--<div class="data">-->
            <!--<div class="item">-->
            <!--<p>今日预约门票</p>-->
            <!--<div class="num">-->
            <!--<span v-for="n in todayBookingsArr" :key='n'>{{n}}</span>张-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<p>年累计核销门票</p>-->
            <!--<div class="num">-->
            <!--<span v-for="n in scenicTicketCountArr" :key='n'>{{n}}</span>张-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="mapnewdiv">-->
            <!--<div class="mapdiv_town"-->
            <!--:class="townIndex==index?'town_active':''"-->
            <!--:style="town.style"-->
            <!--v-for="(town,index) in townList"-->
            <!--:key="index"-->
            <!--@click="changeTown(town.id,index)"-->
            <!--&gt;{{ town.name }}</div>-->
            <!--</div>-->

            <!--&lt;!&ndash;<img src="../../../assets/largescreen/jqMap.png" alt="">&ndash;&gt;-->
            <!--</div>-->
            <div class="modulediv">
              <div class="moduledivtop">客流统计分析</div>
              <div ref="Visitorage" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <!--右侧模块-->
          <div class="Rightmodule">
            <div class="modulediv">
              <div class="moduledivtop">投诉监测</div>
              <div class="Lengthoftabstay rp1">
                <div class="holiday">
                  <div class="holiday1">
                    <div class="holipenday1">
                      <div class="tit">昨日结案量</div>
                      <div class="num">
                        {{ complainMonitoData.yesterdayCount }}
                      </div>
                    </div>
                    <div class="holipenday1">
                      <div class="tit">正在处理投诉</div>
                      <div class="num">
                        {{ complainMonitoData.processingComplain }}
                      </div>
                    </div>
                  </div>
                  <div class="holiday2">
                    <img src="../../../assets/largescreen/jqts.png" alt="" />
                  </div>
                  <div class="holiday1">
                    <div class="holipenday1">
                      <div class="tit">昨日新增投诉</div>
                      <div class="num">
                        {{ complainMonitoData.yesterdayAdd }}
                      </div>
                    </div>
                    <div class="holipenday1">
                      <div class="tit">累计处理</div>
                      <div class="num">
                        {{ complainMonitoData.totalComplain }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modulediv">
              <div class="moduledivtop">景区客源地分析</div>
              <span class="looMap" @click="lookMap()">查看地图分布 ></span>
              <div ref="areaPie" style="height: calc(100% - 0px); width: 97%"></div>
              <!-- <div
                ref="areaPie"
                style="height: calc(100% - 0px); width: 97%"
              ></div> -->
            </div>
            <div class="modulediv comeIn">
              <div class="moduledivtop">门票核销收入</div>
              <el-select v-model="yDate" placeholder="请选择" class="mon_date">
                <el-option
                  v-for="item in monOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
              <!-- <el-date-picker prefix-icon="1" value-format="yyyy-MM" v-model="yDate" type="month" placeholder="选择月" class="mon_date">
                </el-date-picker> -->
              <div class="tableDiv tableDiv_phb comeIn">
                <vue-seamless-scroll
                  ref="vueSeamlessPhbRef2"
                  class="scroll-list-seamless-phb2"
                  :data="data3Copy"
                  :class-option="defaultOption"
                >
                  <ul class="ul-scoll">
                    <li
                      v-for="(item, index) in data3"
                      :key="index"
                      class="td_item"
                    >
                      <div class="tdi_left">
                        <div
                          class="tdil_top"
                          :style="{
                            'background-image':
                              'url(' +
                              require('../../../assets/largescreen/top' +
                                (index < 3 ? index + 1 : 4) +
                                '.png') +
                              ')',
                          }"
                        >
                          TOP.{{ index + 1 }}
                        </div>
                        <div class="tdil_name">{{ item.scenicName }}</div>
                      </div>
                      <div class="tdi_right">
                        <span style="font-weight: bold">{{ item.income }}</span>
                        万元
                        <span
                          class="trend"
                          :style="{ color: icons[item.trend].color }"
                          >{{ icons[item.trend].txt }}</span
                        >
                      </div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="Bottomlandscaping"></div>
      </div>
    </v-scale-screen>
    <dia-div :areaData="areaData" ref="mapDiv"></dia-div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import wordcloud from "echarts-wordcloud";
import diaDiv from "./mapDia";
import vueSeamlessScroll from "vue-seamless-scroll";
import { detectZoom } from "@/utils/detectZoom";
export default {
  name: "",
  components: {
    vueSeamlessScroll,
    diaDiv,
  },
  data() {
    return {
      tianqi: "",
      wendu: "",
      qihouimg: "",
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      nowDate: "",
      week: "",
      bgColors: [
        "rgba(218, 154, 53, 0.32), #DA9A35",
        "#4B595D, #B0C4D4",
        "#8A3A23, #FF9750",
        "#0C274D,#2F7899",
      ],
      areaData: [],
      data1: [],
      data2: [],
      data3: [],
      data1Copy: [],
      data2Copy: [],
      data3Copy: [],
      icons: {
        equality: {
          txt: "",
          color: "#fff",
        },
        down: {
          txt: "⬇",
          color: "red",
        },
        up: {
          txt: "⬆",
          color: "green",
        },
      },
      complainMonitoData: {}, //投诉检测
      yDate: "",
      todayBookingsArr: [],
      scenicTicketCountArr: [],
      RankingTotal: 0,
      xdata: [],
      info: {},
      myislandId: null,
      townList: [
         {
          id: "1745403093714997250",
          name: "花鸟岛",
          style: {
            left: "63%",
            top: "9%",
          },
        },
        {
          id: "1727291339428597761",
          name: "基湖沙滩",
          style: {
            left: "43.6%",
            top: "42%",
          },
        },
        {
          id: "777890888",
          name: "六合朝阳景区",
          style: {
            left: "56.6%",
            top: "45%",
          },
        },
        {
          id: "1745408524306878466",
          name: "三大王沙滩",
          style: {
            left: "75%",
            top: "44%",
          },
        },
        {
          id: "564646556466",
          name: "东崖绝壁",
          style: {
            left: "88.65%",
            top: "47%",
          },
        },
        {
          id: "1745446193648898050",
          name: "元宝山",
          style: {
            left: "59%",
            top: "68%",
          },
        },
        {
          id: "1724612314713296897",
          name: "赤膊山景区",
          style: {
            left: "65%",
            top: "67%",
          },
        },
      ],
      townIndex: 2,
    };
  },
  created() {
    this.getweather();
    let d = new Date();
    let year = d.getFullYear();
    let mon = d.getMonth() + 1;
    mon = mon > 9 ? mon : "0" + mon;
    this.yDate = year + "-" + mon;
  },
  watch: {
    windowHeight(val) {
      let that = this;
    },
    windowWidth(val) {
      let that = this;
    },
  },
  mounted() {
    this.getdata1();
    this.getdata2();
    this.getdata3();
    this.getdata4();
    this.getdata5();
    this.getdata6();
    this.getdata7();
    //启动定时器
    this.getTime();
    this.nowtime = setInterval(() => {
      this.getTime();
    }, 3600000);
    this.pie();
    this.getTotalData();
    this.getVisitoragedata();
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.windowHeight = window.fullHeight; // 高
        that.windowWidth = window.fullWidth; // 宽
      })();
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    monOptions() {
      let date = new Date();
      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let dateArr = [];
      for (let i = 1; i < 13; i++) {
        let json = {
          value: year + "-" + (i < 9 ? "0" + i : i),
          label: year + "-" + (i < 9 ? "0" + i : i),
          disabled: i < mon ? true : false,
        };
        dateArr.push(json);
      }
      return dateArr;
    },
  },
  methods: {
    lookMap() {
      this.$nextTick(() => {
        this.$refs.mapDiv.init();
      });
    },
    //切换岛屿
    changeTown(id, index) {
        this.myislandId = id;
      this.townIndex = index;
      if (!id) return;
      //图表初始化
      this.getdata1();
      this.getdata2();
      this.getdata3();
      //this.getdata4();
      //this.getdata5();
      this.getdata6();

      // this.getTotalData();
      //this.getVisitoragedata();
    },
    gohome() {
      this.$router.replace({
        path: "/home",
      });
    },
    getweather() {
      let that = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive("嵊泗县", function (err, data) {
          if (data.info == "OK") {
            that.tianqi = data.weather;
            that.wendu = data.temperature;

            if (data.weather.indexOf("晴") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png";
            } else if (data.weather.indexOf("暴雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png";
            } else if (data.weather.indexOf("暴雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png";
            } else if (data.weather.indexOf("冰雹") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png";
            } else if (data.weather.indexOf("大雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png";
            } else if (data.weather.indexOf("大雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png";
            } else if (data.weather.indexOf("多云") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png";
            } else if (data.weather.indexOf("雷阵雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png";
            } else if (data.weather.indexOf("雾") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png";
            } else if (data.weather.indexOf("小到中雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png";
            } else if (data.weather.indexOf("小雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png";
            } else if (data.weather.indexOf("小雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png";
            } else if (data.weather.indexOf("阴") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png";
            } else if (data.weather.indexOf("雨夹雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png";
            } else if (data.weather.indexOf("阵雨@") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png";
            } else if (data.weather.indexOf("中到大雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png";
            } else if (data.weather.indexOf("中雪") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png";
            } else if (data.weather.indexOf("中雨") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png";
            } else if (data.weather.indexOf("霾") != -1) {
              that.qihouimg =
                "https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png";
            }
          }
        });
      });
    },
    getTotalData() {
      this.$http
        .post("/sys/screen/scenic/queryTabStatistics", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.info = res.data.data;
            this.todayBookingsArr = (res.data.data.todayBookings + "").split(
              ""
            );
            this.scenicTicketCountArr = (
              res.data.data.scenicTicketCount + ""
            ).split("");
          }
        });
    },

     //景区客源地分析
     pie(trafficWay) {
      let myChart = echarts.init(this.$refs.areaPie);
      // let sum = trafficWay.reduce((cur, pre) => {
      //     return cur + pre.value;
      // }, 0);
      let data = [];
      let legendData = [];
      const color = [
        "#03FF96",
        "#046EFF",
        "#EA3D75",
        "#B111FF",
        "#35E9FF",
        "#6458F5",
        "#F5C460",
        "#FE5959",
        "#3062DF",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        let name = trafficWay[i].name;
        legendData.push(name);
        data.push(
          {
            value: trafficWay[i].value,
            name: name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 10,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
          {
            value: 2, // 控制每个环形之间的间隙
            name: "",
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          }
        );
      }

      let option = {
        grid: {
          // 让图表占满容器
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px",
        },
        color: color,
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "-5px",
          icon: "circle",
          textStyle: {
            color: "#C6D7F1",
            fontSize: 12,
            padding: [0, 10, 0, 0],
          },
          itemGap: 24, // 图例之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            //  borderWidth: 3
          },
          orient: "horizontal",
          data: legendData,
          align: "left",
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockwise: false,
            radius: ["40%", "60%"],
            center: ["50%", "40%"],
            emphasis: {
              scale: false,
            },
            //   avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };

      myChart.setOption(option);
      this.resizeEcharts(this.$refs.areaPie);
    },
   
    //柱状图
    getVisitoragedata(yaxisData, yaxisData2) {
      let myChart = echarts.init(this.$refs.Visitorage);
      let xaxisData = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      // let yaxisData = [70, 120, 200, 130, 120, 170, 190, 241, 122, 112, 101, 21];
      // let yaxisData2 = [120, 110, 210, 130, 112, 117, 110, 214, 112, 112, 171, 211];
      const offsetX = 8;
      const offsetY = 4;
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - offsetX, shape.y - offsetY];
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });

      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
          const c4 = [shape.x + offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });

      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
          const c3 = [shape.x, shape.y - offsetX];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });

      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);

      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          borderColor: "#4ddd8f",
          padding: 5,
          textStyle: {
            color: "#C6D7F1",
          },
        },
        legend: {
          itemWidth: 20,
          itemHeight: 6,
          top: 0,
          radius: 5,
          right: 30,
          icon: "rect",
          textStyle: {
            color: "#C6D7F1",
          },
        },
        grid: {
          left: "1%",
          right: "0%",
          top: "20%",
          bottom: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xaxisData,
          axisLabel: {
            fontSize: 12,
            color: "#C6D7F1",
          },
        },
        yAxis: {
          type: "value",
          name: "单位:万人",
          nameTextStyle: {
            fontSize: 12,
            color: "#C6D7F1",
            fontWeight: 400,
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "#545454",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0B3556",
              width: 1,
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            color: "#C6D7F1",
          },
        },
        series: [
          {
            name: "2023年",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              const xAxisPoint = api.coord([api.value(0), 0]);
              const distance = 30;
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#152E89",
                        },
                        {
                          offset: 0.35,
                          color: "#088BFF",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#152E89",
                        },
                        {
                          offset: 0.35,
                          color: "#088BFF",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0] - distance,
                      y: location[1],
                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                    },
                    style: {
                      fill: "#088BFF",
                    },
                  },
                ],
              };
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#006DFF",
                },
                {
                  offset: 1,
                  color: "rgba(0, 100, 181, 0.14)",
                },
              ]),
            },
            data: yaxisData,
          },
          {
            name: "2024年",
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#6AFFEB",
                        },
                        {
                          offset: 0.35,
                          color: "#6AFFEB",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#00BEAA",
                        },
                        {
                          offset: 0.35,
                          color: "#00BEAA",
                        },
                        {
                          offset: 1,
                          color: "transparent",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: "#03FFB1",
                    },
                  },
                ],
              };
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#02D8EA",
                },
                {
                  offset: 1,
                  color: "rgba(0, 201, 217, 0.40)",
                },
              ]),
            },
            data: yaxisData2,
          },
          // {
          //     type: "bar",
          //     itemStyle: {
          //         color: "transparent",
          //     },
          //     data: yaxisData,
          // },
        ],
      };
      myChart.setOption(option);
      // this.resizeEcharts(this.$refs.Visitorage);
    },
    //折线图
    lineChart(x, y) {
      let myChart = echarts.init(this.$refs.lineChartRef);
      let option = {
        tooltip: {
          trigger: "axis",
        },

        xAxis: [
          {
            type: "category",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0B3556",
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              fontSize: 12,
              color: "#C6D7F1",
            },
            data: x,
          },
        ],
        grid: {
          left: "55px",
          bottom: "32px",
        },
        yAxis: [
          {
            type: "value",
            name: "单位:人",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0B3556",
                width: 1,
                type: "solid",
              },
            },
            nameTextStyle: {
              color: "#C6D7F1",
              fontWeight: 400,
              fontSize: 12,
            },
            axisLabel: {
              fontSize: 12,
              color: "#C6D7F1",
            },
            min: 0,
            interval: 5000,
          },
        ],
        series: [
          {
            name: "预约量",
            type: "line",
            symbol: "circle",
            symbolSize: 4,
            // label: {
            //     normal: {
            //         show: false,
            //         position: 'top',
            //         formatter: function (d) {
            //             if ((Math.max.apply(null, rainfallValue) == d.value) || Math.min.apply(null, rainfallValue) == d.value) {
            //                 return " ";
            //             } else {
            //                 return d.value;
            //             }
            //         }
            //     }
            // },
            data: y,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00EBFD",
                  },
                  {
                    offset: 1,
                    color: "#017AF4",
                  },
                ],
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  itemStyle: {
                    label: {
                      show: false,
                    },
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
      //this.resizeEcharts(this.$refs.lineChartRef);
    },
    //景区今日预订量
    getdata1() {
      this.$http
        .post("/sys/screen/scenic/queryBookingsList", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data.length != 0) {
              this.data1 = res.data.data;
            } else {
              this.data1 = [];
            }
            if (this.data1) {
              this.$nextTick(() => {
                const scrollListDom = document.querySelector(
                  ".scroll-list-seamless-phb"
                );
                if (scrollListDom) {
                  const scrollListDomLast =
                    scrollListDom.querySelectorAll("li")[
                      scrollListDom.querySelectorAll("li").length - 1
                    ];
                  let liLength = scrollListDom.querySelectorAll("li").length;
                  let liHeight = scrollListDomLast.clientHeight;
                  let liSumHeight = liHeight * liLength;
                  let parentHeight =
                    document.querySelector(".tableDiv").clientHeight;
                  let autoPlay = liSumHeight > parentHeight;
                  if (autoPlay) {
                    this.data1Copy = this.data1;
                    this.$refs.vueSeamlessPhbRef._startMove();
                  }
                }
              });
            }
          }
        });
    },
    //未来七日预订量
    getdata2() {
      this.$http
        .post("/sys/screen/scenic/querySevenDayBookings", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            let x = [];
            let y = [];
            for (let i = 0; i < res.data.data.length; i++) {
              x.push(res.data.data[i].playDate);
              y.push(res.data.data[i].sumCount);
            }

            this.lineChart(x, y);
          }
        });
    },
    //热门景区排行榜
    getdata3() {
      this.$http
        .post("/sys/screen/scenic/queryScenicRankingList", {
          spotId: this.myislandId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data.length != 0) {
              let data = res.data.data;
              let total =
                parseFloat(data[0].holidayCount) > parseFloat(data[0].workCount)
                  ? parseFloat(data[0].holidayCount) * 1.2
                  : parseFloat(data[0].workCount) * 1.2;
              let avatar = total / 5;
              this.xdata = [];
              if (total) {
                for (let i = 0; i < 5; i++) {
                  this.xdata.push(avatar * i);
                }
              }
              this.RankingTotal = total;
              this.data2=data;
            } else {
              this.data2 = [];
            }
            console.log(this.data2)
            if (this.data2) {
              this.$nextTick(() => {
                const scrollListDom = document.querySelector(
                  ".scroll-list-seamless"
                );
                if (scrollListDom) {
                  const scrollListDomLast =
                    scrollListDom.querySelectorAll("li")[
                      scrollListDom.querySelectorAll("li").length - 1
                    ];
                  let liLength = scrollListDom.querySelectorAll("li").length;
                  let liHeight = scrollListDomLast.clientHeight;
                  let liSumHeight = liHeight * liLength;
                  let parentHeight =
                    document.querySelector(".mjzyx_pm").clientHeight;
                  let autoPlay = liSumHeight > parentHeight;
                  if (autoPlay) {
                    this.data2Copy = this.data2;
                    this.$refs.vueSeamlessRef._startMove();
                  }
                }
              });
            }
          }
        });
    },
    //年度客流对比
    getdata4() {
      this.$http
        .get("/sys/screen/scenic/queryAnnualPassengerFlows")
        .then((res) => {
          if (res.data.code == 0) {
            let data = [];
            for (let i in res.data.data) {
              data.push(res.data.data[i]);
            }
            this.getVisitoragedata(data[0], data[1]);
          }
        });
    },
    //投诉监测
    getdata5() {
      this.$http.get("/sys/screen/scenic/complainMonitor").then((res) => {
        if (res.data.code == 0) {
          this.complainMonitoData = res.data.data;
        }
      });
    },
    //门票核销收入
    getdata6() {
      this.$http
        .post("/sys/screen/scenic/queryCurrentMonthIncome", {
          params: {
            yDate: this.yDate,
            spotId: this.myislandId,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data.length != 0) {
              this.data1 = res.data.data;
            } else {
              this.data1 = [];
            }
            if (this.data3) {
              this.$nextTick(() => {
                const scrollListDom = document.querySelector(
                  ".scroll-list-seamless-phb2"
                );
                if (scrollListDom) {
                  const scrollListDomLast =
                    scrollListDom.querySelectorAll("li")[
                      scrollListDom.querySelectorAll("li").length - 1
                    ];
                  let liLength = scrollListDom.querySelectorAll("li").length;
                  let liHeight = scrollListDomLast.clientHeight;
                  let liSumHeight = liHeight * liLength;
                  let parentHeight =
                    document.querySelector(".comeIn").clientHeight;
                  let autoPlay = liSumHeight > parentHeight;
                  if (autoPlay) {
                    this.data3Copy = this.data3;
                    this.$refs.vueSeamlessRef2._startMove();
                  }
                }
              });
            }
          }
        });
    },
    getdata7() {
      this.$http.get("/sys/screen/scenic/queryProvinceCount").then((res) => {
        if (res.data.code == 0) {
          this.pie(res.data.data);
          this.areaData = res.data.data;
        }
      });
    },
    
    // getdata8() {
    //   this.$http.get("/scenic/isscenicspot/queryChargeSpots",).then((res) => {
    //     if (res.data.code == 0) {
    //       console.log(res.data.data)
    //     //   this.pie(res.data.data);
    //     //   this.areaData = res.data.data;
    //     }
    //   });
    // },
    dateFormat(date, format) {
      format = format || "yyyy-MM-dd hh:mm:ss";
      if (date !== "Invalid Date") {
        let o = {
          "M+": date.getMonth() + 1, //month
          "d+": date.getDate(), //day
          "h+": date.getHours(), //hour
          "m+": date.getMinutes(), //minute
          "s+": date.getSeconds(), //second
          "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
          S: date.getMilliseconds(), //millisecond
        };
        if (/(y+)/.test(format))
          format = format.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        for (let k in o)
          if (new RegExp("(" + k + ")").test(format))
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
        return format;
      }
      return "";
    },
    //获取实时日期
    getTime() {
      const dataTime = new Date();
      this.nowDate = this.dateFormat(dataTime, "yyyy年MM月dd");
      let w = ["日", "一", "二", "三", "四", "五", "六"];
      let xinqi = dataTime.getDay();
      this.week = "星期" + w[xinqi]; //星
    },
    //解决图表鼠标悬浮错位问题
    // resizeEcharts(ele) {
    //     let rate = 1920 / window.innerWidth;
    //     if (ele.style) {
    //         ele.style.zoom = 1 * rate;
    //         ele.style.transform = `scale(${1 / rate})`;
    //         ele.style.transformOrigin = 'top left';
    //     }
    // },
    back() {
      this.$router.replace({
        path: "/home",
      });
    },
  
  },
  watch: {
    yDate(newval, oldval) {
      if (newval != oldval && oldval) {
        this.getdata6();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.comeIn {
  .mon_date {
    position: absolute;
    right: 20px;
    top: 30px;
  }

  ::v-deep .el-select {
    width: 80px;
    height: 24px;
    border-color: #33569e;
    background: linear-gradient(to bottom, #273f7c, #040c2b, #2a4383);

    .el-input__inner {
      border-color: #33569e;
      background: transparent;
      color: #c6d7f1;
      padding: 4px 4px 3px 8px !important;
      font-size: 12px;
      height: 100%;
      border-radius: 0;
    }

    .el-input__icon {
      line-height: 25px;
    }
  }
}

.mjzyx_pm {
  width: 100%;
  height: calc(100% - 115px);
  padding: 0 10px;
  overflow: hidden;

  .mpm_item {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mpmi_left {
      width: 100%;
      display: flex;
      align-items: center;

      .mpmil_top {
        min-width: 47px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-family: YouSheBiaoTiHei;
        color: #ffffff;
      }

      .mpmil_city {
        margin-left: 8px;
        width: 95px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
        text-align: left;
      }

      .mpmil_line {
        width: 1px;
        height: 42px;
        background: #0a2840;
        margin-left: 10px;
      }

      .mpmil_bl {
        width: calc(100% - 130px);
        height: 4px;
        background: #172640;
        border-radius: 0 3px 3px 0;
        position: relative;

        .mpmil_bl_bfb {
          height: 100%;
          background: linear-gradient(
            270deg,
            #00bff4 0%,
            rgba(4, 110, 255, 0) 100%
          );
          border-radius: 0 3px 3px 0;

          &:last-child {
            margin-top: 4px;
            background: linear-gradient(
              270deg,
              #89fccc 0%,
              rgba(4, 110, 255, 0) 100%
            );
          }
        }
      }
    }
  }
}

.ul-scoll {
  padding: 0;
  margin: 0;
}

.tableDiv {
  width: 100%;
  height: calc(100% - 44px);
  overflow: hidden;

  &.comeIn {
    margin-top: 10px;
    height: calc(100% - 64px);
  }

  .td_item {
    width: calc(100% - 10px);
    height: 32px;
    margin: 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 29px;
    box-sizing: border-box;
    background: rgba(2, 65, 110, 0.3);

    .tdi_left {
      display: flex;
      align-items: center;

      .tdil_top {
        width: 47px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        font-family: YouSheBiaoTiHei;
        color: #ffffff;
      }

      .tdil_name {
        margin-left: 16px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
      }
    }

    .tdi_right {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #c6d7f1;

      .trend {
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
  }
}

.lp3 {
  .data {
    position: absolute;
    bottom: 5px;
    display: flex;
    justify-content: space-between;
    width: 250px;
    right: 10px;
    color: #c6d7f1;
  }

  .dot {
    position: absolute;
    right: 10px;
    color: #c6d7f1;
    top: 29px;
    font-size: 12px;
    width: 100%;
    text-align: right;

    span {
      i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: #0cff9a;
        margin-right: 4px;
      }

      &:first-child {
        margin-right: 10%;

        i {
          background: #0771ff;
        }
      }
    }
  }

  .tit {
    color: #7299d4;
    font-size: 12px;
    padding: 16px 10px 10px 10px;
    position: relative;

    span {
      display: inline-block;

      &:first-child {
        width: 68px;
      }

      &:last-child {
        position: absolute;
        right: 10px;
        bottom: 0;
      }
    }
  }
}

.rp1 {
  height: calc(100% - 44px);
  padding: 0 20px;
  text-align: center;

  .holiday {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;

    .holipenday1 {
      width: 100px;
      height: 49px;
      background: linear-gradient(180deg, rgba(0, 31, 61, 0) 0%, #00477f 100%);
      border: 1px solid;
      border-top: 0;
      border-image: linear-gradient(
          180deg,
          rgba(40, 166, 198, 1),
          rgba(64, 223, 255, 1)
        )
        1 1;

      .tit {
        width: 100%;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c4dbff;
        line-height: 6px;
        border-bottom: 1px solid #105d99;
      }

      .num {
        width: 100%;
        font-size: 24px;
        font-family: DINCondensed, DINCondensed;
        font-weight: bold;
        color: #ffffff;
        line-height: 29px;
      }
    }

    .holiday2 {
      height: 100%;

      img {
        height: 100%;
      }
    }
  }

  .holiday1 {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

::v-deep .dv-scroll-board .rows .row-item {
  height: 32px !important;
  line-height: 32px !important;
  margin-top: 5px;
  background-color: rgba(2, 65, 110, 0.3);
  justify-content: space-between;
  padding-right: 5px;
  position: relative;

  &:last-child {
    .line {
      height: 250% !important;
    }
  }

  .bottomBg {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    width: 250px;
    flex: 1;
    height: 12px;
    // background-color: #172640;

    span {
      position: absolute;
      left: 0;
      z-index: 1;
      height: 4px;

      &:first-child {
        width: 1px;
        height: 330%;
        top: -70%;
        background-color: #174468;
        left: 0;
        z-index: 11;
      }

      &:nth-child(2) {
        top: 0;
        background: linear-gradient(to right, #172640, #00bff4, #046eff);
      }

      &:last-child {
        bottom: 0;
        background: linear-gradient(to right, #172640, #89fccc, #00ff95);
      }
    }
  }
}

.Passengerflow1 img {
  width: 24px;
  height: 24px;
}

.Passengerflow1 {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

.Passengerflow3 {
  height: 40px;
  font-size: 18px;
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  color: #ffffff;
  line-height: 40px;
  padding: 0 10px;
}

.Passengerflow2 {
  height: 40px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #c6d7f1;
  line-height: 40px;
}

.Passengerflow {
  width: 100%;
  height: 40px;
  background: linear-gradient(
    270deg,
    rgba(39, 115, 255, 0.4) 0%,
    rgba(39, 115, 255, 0.25) 23%,
    rgba(39, 115, 255, 0.06) 100%
  );
  border-radius: 2px;
  border: 1px solid #294178;
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.moduledivtop {
  width: 100%;
  height: 44px;
  background: url("../../../assets/largescreen/y6.png");
  background-repeat: no-repeat;
  padding-left: 35px;
  font-size: 24px;
  font-family: YouSheBiaoTiHei;
  color: #ffffff;
  line-height: 38px;
}

.modulediv {
  width: 100%;
  height: 32%;
  display: flex;
  flex-direction: column;
  position: relative;

  &.modulediv_jzyx {
    height: 66%;
  }

  .numsdiv {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .numsdiv_pre {
      display: flex;
      flex-direction: column;
      align-items: center;

      &.numsdiv_pre_mszs {
        margin: 0 46px;
      }

      .np_title {
        font-size: 20px;
        font-family: PingFangHK, PingFangHK;
        font-weight: 500;
        color: #c6d7f1;
        line-height: 28px;
      }

      .np_num {
        display: flex;
        align-items: center;

        .npn_item {
          width: 40px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          background: url(../../../assets/largescreen/num_bg.png) no-repeat;
          background-size: 100% 100%;
          margin: 5px 2px 0 2px;
          font-size: 30px;
          font-family: D-DINExp, D-DINExp;
          font-weight: bold;
          color: #c6d7f1;
        }

        .npn_dw {
          height: 56px;
          line-height: 56px;
          padding: 0 5px;
          font-size: 16px;
          font-family: PingFangHK, PingFangHK;
          font-weight: 500;
          color: #c6d7f1;
        }
      }
    }
  }

  .md_map {
    margin-top: 11px;
    height: calc(100% - 100px);

    .mapdiv {
      height: 100%;
      position: relative;
      background: url("../../../assets/largescreen/y11.png") no-repeat;
      background-size: 100% 100%;

      .mapdiv_town {
        height: 41px;
        background: url("../../../assets//largescreen/town_bg.png");
       position: absolute;
    font-size: 12px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: inherit;
    color: #ffffff;
    text-align: center;
    padding: 6px 6px;
    cursor: pointer;
    min-width: 54px;
    background-size: 100% 100%;

        &.town_active {
          width: 84px;
          height: 78px;
          background: url("../../../assets//largescreen/town_active_bg.png");
          padding-top: 9px;
          margin-left: -8px;
          margin-top: -28px;
        }
      }
    }
  }

  .chartBox {
    width: 100%;
    height: calc(100% - 44px);
    position: relative;

    .cb_chart {
      width: 100%;
      height: 100%;
    }

    .cb_tab {
      position: absolute;
      width: 56px;
      height: 24px;
      border-radius: 1px;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(51, 86, 158, 1),
          rgba(66, 104, 189, 1)
        )
        1 1;
      display: flex;
      align-items: center;
      right: 20px;
      top: 0;
      z-index: 1031;

      & > div {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #15203c 0%, #142544 100%);
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #6d7d99;
        cursor: pointer;

        &.active {
          color: #c6d7f1;
          background: linear-gradient(180deg, #273f7c 0%, #4566bc 100%);
        }
      }
    }
  }

  .tableDiv {
    width: 100%;
    height: calc(100% - 44px);
    overflow: hidden;

    .td_item {
      width: calc(100% - 10px);
      height: 32px;
      margin: 10px 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 29px;
      box-sizing: border-box;
      background: rgba(2, 65, 110, 0.3);

      .tdi_left {
        display: flex;
        align-items: center;

        .tdil_top {
          width: 47px;
          height: 24px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          line-height: 24px;
          text-align: center;
          font-size: 12px;
          font-family: YouSheBiaoTiHei;
          color: #ffffff;
        }

        .tdil_name {
          margin-left: 16px;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #c6d7f1;
        }
      }

      .tdi_right {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
      }
    }
  }

  .mjzyx_top {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mjzyxt_item {
      width: calc(50% - 9px);
      height: 88px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: end;
      align-items: flex-end;

      &:first-child {
        background: url(../../../assets/largescreen/ggtf_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      &:last-child {
        background: url(../../../assets/largescreen/lxtg_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .mti_text {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #7299d4;
      }

      .mti_num {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-family: D-DINExp, D-DINExp;
        font-weight: bold;
        color: #c6d7f1;
        margin-top: 6px;

        span {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #7299d4;
          margin-left: 4px;
        }
      }

      & > div {
        margin-right: 12px;
      }
    }
  }

  .mpm_title {
    width: 100%;
    padding: 0 20px;
    font-size: 18px;
    font-family: YouSheBiaoTiHei;
    color: #c6d7f1;
    line-height: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #90deff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    margin-bottom: 10px;
    z-index: 1;

    &::after {
      content: "";
      position: absolute;
      width: 64px;
      height: 10px;
      background: linear-gradient(
        90deg,
        rgba(39, 115, 255, 0.4) 0%,
        rgba(39, 115, 255, 0.25) 23%,
        rgba(39, 115, 255, 0.06) 100%
      );
      left: 20px;
      bottom: -4px;
      z-index: 0;
    }
  }

  .mjzyx_pm {
    width: 100%;
    height: calc(100% - 120px);
    padding: 0 20px;
    overflow: hidden;

    .mpm_item {
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .mpmi_left {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;

        .mpmil_top {
          width: 47px;
          height: 24px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-family: YouSheBiaoTiHei;
          color: #ffffff;
        }

        .mpmil_city {
          margin-left: 20px;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #c6d7f1;
          text-align: right;
        }

        .mpmil_line {
          width: 1px;
          height: 42px;
          background: #0a2840;
          margin-left: 10px;
        }

        .mpmil_bl {
          width: calc(100% - 120px);
          height: 6px;
          background: #172640;
          border-radius: 0 3px 3px 0;
          position: relative;

          .mpmil_bl_bfb {
            height: 100%;
            background: linear-gradient(
              270deg,
              #00bff4 0%,
              rgba(4, 110, 255, 0) 100%
            );
            border-radius: 0 3px 3px 0;
          }
        }
      }

      .mpmi_right {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #c6d7f1;
      }
    }
  }

  .ul-scoll {
    padding-left: 0;
  }
}

.mapdiv {
  width: 100%;
  height: 66%;
  text-align: center;

  .mapnewdiv {
    width: 100%;
    height: calc(100% - 100px);
    background: url("../../../assets/largescreen/y11.png") no-repeat;
    background-size: 100% 100%;
  }

  .mapdiv_town {
    background: url("../../../assets/largescreen/town_bg.png");
    position: absolute;
    font-size: 16px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    cursor: pointer;

    &.town_active {
      width: 84px;
      height: 78px;
      background: url("../../../assets/largescreen/town_active_bg.png");
      padding-top: 5px;
      margin-left: -8px;
      margin-top: -37px;
    }
  }

  .data {
    display: flex;
    padding: 0 10%;
    justify-content: space-between;

    .item {
      width: 50%;

      p {
        width: 100%;
        height: 28px;
        font-size: 20px;
        font-family: PingFangHK, PingFangHK;
        font-weight: 500;
        color: #c6d7f1;
        line-height: 28px;
        margin: 0 0 5px;
      }

      .num {
        line-height: 56px;
        font-size: 16px;
        font-family: PingFangHK, PingFangHK;
        font-weight: 500;
        color: #c6d7f1;

        span {
          display: inline-block;
          width: 40px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          background: url(../../../assets/largescreen/num_bg.png) no-repeat;
          background-size: 100% 100%;
          margin: 5px 8px 0 0;
          font-size: 30px;
          font-family: D-DINExp, D-DINExp;
          font-weight: bold;
          color: #c6d7f1;
        }
      }
    }
  }
}

.Intermediatemodule {
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.Leftsidemodule,
.Rightmodule {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.Touristbottomportrait {
  width: calc(100% - 60px);
  margin: 0 auto;
  height: calc(100vh - 136px);
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.Bottomlandscaping {
  height: 47px;
  width: calc(100% - 60px);
  margin: 0 auto;
  background: url("../../../assets/largescreen/y10.png");
  /*background-size: 100% 100%;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.selectdada {
  color: #ffffff !important;
}

.Navigationimgright {
  width: 183px;
  height: 50px;
  line-height: 50px;
  background: url("../../../assets/largescreen/y5.png");
  /*background-size: 100% 100%;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  align-items: center;
  font-size: 24px;
  font-family: YouSheBiaoTiHei;
  color: #79a5cb;
  text-align: center;
  cursor: pointer;
}

.Navigationimg {
  cursor: pointer;
  width: 183px;
  height: 50px;
  line-height: 50px;
  background: url("../../../assets/largescreen/y4.png");
  /*background-size: 100% 100%;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  align-items: center;
  font-size: 24px;
  font-family: YouSheBiaoTiHei;
  color: #79a5cb;
  text-align: center;
}

.Navigationright {
  width: calc(50% - 310px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.Navigationleft {
  width: calc(50% - 310px);
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.Navigationmiddle {
  width: 360px;
  height: 89px;
  font-size: 40px;
  font-family: YouSheBiaoTiHei;
  color: #ffffff;
  line-height: 60px;
  background: linear-gradient(180deg, #ffffff 0%, #90deff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.Navigation {
  flex-grow: 1;
  height: 89px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mydate {
  width: 220px;
  height: 22px;
  font-size: 16px;
  font-family: Helvetica;
  color: #c6d7f1;
  line-height: 22px;
  padding-right: 30px;
  text-align: right;
}

.weathertext {
  width: 110px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #c6d7f1;
  line-height: 22px;
}

.weatherimg img {
  width: 24px;
  height: 22px;
}

.weatherimg {
  width: 24px;
  height: 22px;
  margin-left: 10px;
  margin-right: 5px;
}

.mydate {
  width: 260px;
  height: 22px;
  font-size: 16px;
  font-family: Helvetica;
  color: #c6d7f1;
  line-height: 22px;
  padding-right: 30px;
  text-align: right;
}

.fanhuimain {
  width: 102px;
  height: 38px;
  margin-left: 30px;
}

.fanhuimain img {
  width: 102px;
  height: 38px;
}

.weather {
  width: 260px;
  height: 22px;
  display: flex;
  align-items: center;
}

.Touristportrait {
  width: 100%;
  height: 89px;
  background: url("../../../assets/largescreen/y2.png");
  /*background-size: 100% 100%;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .screen-box .screen-wrapper {
  margin: 0 !important;
}

.maindivwc {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1031;
}

.maindiv {
  /*zoom:1;*/
  background: url("../../../assets/largescreen/y1.png");
  /*background: #F1F4F5;*/
  width: 100%;
  height: 100%;
  background-size: 100% 100%;

  display: flex;
  flex-direction: column;
}
.looMap {
  position: absolute;
  right: 20px;
  top: 45px;
  z-index: 1;
  width: 116px;
  height: 35px;
  border-radius: 17px;
  text-align: center;
  line-height: 35px;
  background-image: linear-gradient(to bottom, #0e1b3a, #013e71);
  color: #c4dbff;
  font-size: 14px;
}
</style>
